<template>
    <div>
        <el-card class="box-card1">
            <div>
                <el-input
                        size="small"
                        style="width: 300px;margin-right: 10px;"
                        placeholder="添加职称.."
                        prefix-icon="el-icon-plus"
                        v-model="jl.name">
                </el-input>
                <el-select v-model="jl.levelId" placeholder="职称等级" size="small" @focus="initLevels">
                    <el-option
                            v-for="item in levels"
                            :key="item.levelName"
                            :label="item.levelName"
                            :value="item.id">
                    </el-option>
                </el-select>
                <el-button icon="el-icon-plus" size="small" type="primary" style="vertical-align: top;margin-left:10px "
                         @click="addJob(jl)">添加
                </el-button>
            </div>
            <div class="mian-table" >
                <el-table
                        :data="jobs"
                        border
                        @selection-change="select"
                        size="small">
                    <el-table-column
                            type="selection"
                            width="55">
                    </el-table-column>
                    <el-table-column
                            prop="id"
                            label="编号"
                            width="55">
                    </el-table-column>
                    <el-table-column
                            prop="name"
                            label="职称名称"
                            width="100">
                    </el-table-column>
                    <el-table-column
                            prop="level.levelName"
                            label="职称等级"
                            width="100">
                    </el-table-column>
                    <el-table-column
                            prop="createDate"
                            label="创建时间"
                            width="140">
                    </el-table-column>
                    <el-table-column
                            prop="enable"
                            label="状态"
                            :filters="[{ text: '启用', value: '1' }, { text: '未启用', value: '0' }]"
                            :filter-method="filterTag"
                            filter-placement="bottom-end"
                            width="120">
                        <template slot-scope="scope">
                            <el-tag
                                    :type="scope.row.enabled == '1' ? 'success' : 'danger'"
                                    close-transition>{{scope.row.enabled == '0' ? '未启用' : '启用'}}</el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column label="操作">
                        <template slot-scope="scope">
                            <el-button
                                    size="mini"
                                    @click="handleEdit(scope.$index, scope.row)">编辑
                            </el-button>
                            <el-button
                                    size="mini"
                                    type="danger"
                                    @click="handleDelete(scope.$index, scope.row)">删除
                            </el-button>
                        </template>
                    </el-table-column>
                </el-table>

            </div>
            <el-button
                    style="margin-top: 12px"
                    type="danger"
                    @click="deleteSelections"
                    :disabled="this.multiSelections.length == 0">
                批量删除
            </el-button>
        </el-card>
        <el-card class="box-card1" style="width: 400px;margin-left: 5%; vertical-align: top;">
            <div>
                <el-input
                    placeholder="请输入内容"
                    prefix-icon="el-icon-plus"
                    v-model="level.levelName"
                    size="small"
                    style="width: 240px">
                </el-input>
               <el-button size="small" type="primary" style="margin-left: 20px" @click="addLevel"> 添加</el-button>
            </div>
            <div style="margin-top: 20px">
                <el-table
                        :data="levels"
                        border
                        style="width: 100%">
                    <el-table-column
                            prop="id"
                            label="编号"
                            width="55">
                    </el-table-column>
                    <el-table-column
                            prop="levelName"
                            label="职称等级"
                            width="120">
                    </el-table-column>
                    <el-table-column label="操作" width="184">
                        <template slot-scope="scope">
                            <el-button
                                    size="mini"
                                    type="danger"
                                    @click="deleteLevel(scope.$index, scope.row)">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>


        </el-card>

        <el-dialog
                title="修改职位"
                :visible.sync="dialogVisible"
                width="30%">
            <div style="display:inline-block;width: 70%">
                <div >
                    <el-tag>职称名称</el-tag>
                    <el-input class="updatePosInput" v-model="updataJob.name" size="small" style="width:192px"></el-input>
                </div>
                <div style="margin-top: 10px">
                    <el-tag style="margin-right: 10px;">职称等级</el-tag>
                    <el-select v-model="updataJob.levelId" placeholder="职称等级" size="small" @focus="initLevels" @change="levelUpdata">
                        <el-option

                                v-for="item in levels"
                                :key="item.levelName"
                                :label="item.levelName"
                                :value="item.id">
                        </el-option>
                    </el-select>
                </div>
            </div>
            <div style="display:inline-block;width: 30%">
                <el-switch
                        v-model="updataJob.enabled"
                        active-color="#13ce66"
                        inactive-color="#ff4949"
                        active-value = "1"
                        inactive-value = "0"
                        active-text="启用"
                        inactive-text="关闭">
                </el-switch>
            </div>

            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="doUpdata">确 定</el-button>
             </span>
        </el-dialog>
    </div>

</template>

<script>
    export default {
        name: "JobManager",

        data(){
            return{
                level:{
                    levelName:''
                },
                jobs:[],
                jl:{
                    name:'',
                    levelId:''
                },
                levels:[],
                multiSelections:[],

                updataJob:{},
                dialogVisible:false
            }
        },

        methods:{
            initJobs(){
                this.getRequest("/system/basic/job/").then(res =>{
                    this.jobs = res.data;
                })
            },

            initLevels(){
                this.getRequest("/system/basic/lev/").then(res =>{
                    this.levels = res.data;
                })
            },

            select(val){
                this.multiSelections = val;
            },

            filterTag(value, row) {
                return row.tag === value;
            },

            //更新记录
            doUpdata(){
                this.putRequest("/system/basic/job/",this.updataJob).then(resp=>{
                    this.initJobs();
                    this.dialogVisible = false;
                })
            },

            levelUpdata(a){
                this.updataJob.levelId = a;
            },

            //添加记录
            addJob(data){
                if (data.name || data.levelId) {
                    this.postRequest("/system/basic/job/",data).then(resp => {
                        if (resp) {
                            this.initJobs();
                            this.jl.name = '';
                            this.jl.levelId = '';
                        }
                    })
                } else {
                    this.$message.warning("职称名或者职称等级不能为空！")
                }
            },

            //修改记录
            handleEdit(index, data){
                // this.updataJob = data;
                this.updataJob = Object.assign({},data);
                this.updataJob.enabled = this.updataJob.enabled.toString();
                this.dialogVisible =true;
            },

            //删除行记录
            handleDelete(index, data) {
                this.$confirm('此操作将永久删除该' + data.name + ', 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.deleteRequest("/system/basic/job/" + data.id).then(resp => {
                        if (resp) {
                            this.initJobs();
                        }
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },

            // 删除选中项
            deleteSelections(){
                this.$confirm('此操作将永久删除【' + this.multiSelections.length + '】条记录, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    let ids = '?';
                    this.multiSelections.forEach(item => {
                        ids += 'ids=' + item.id + '&';
                    })
                    this.deleteRequest("/system/basic/job/" + ids).then(resp => {
                        if (resp) {
                            this.initJobs();
                        }
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },

            addLevel(){
               this.postRequest("/system/basic/lev/",this.level).then(res =>{
                    this.level.levelName='';
                    this.initLevels();
               })
            },

            deleteLevel(index,data){

                this.$confirm('此操作将永久删除'+data.levelName+', 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.deleteRequest("/system/basic/lev/" + data.id).then(req=>{
                        this.initLevels();
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });

            }
        },

        mounted(){
            this.initLevels();
            this.initJobs();
        }
    }
</script>

<style>
    .box-card1{
        width: 800px;
        display: inline-block;
    }

</style>